'use client'

import { useState, useEffect } from 'react'
import { toast } from 'react-hot-toast'
import api from '@/lib/api'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { Textarea } from '@/components/ui/textarea'
import { Checkbox } from '@/components/ui/checkbox'

interface ReviewDialogProps {
  orderId: number
  open: boolean
  onOpenChange: (open: boolean) => void
  onSuccess: () => void
  initialRating?: number
  initialComment?: string
  initialIsAnonymous?: boolean
}

export default function ReviewDialog({
  orderId,
  open,
  onOpenChange,
  onSuccess,
  initialRating = 5,
  initialComment = '',
  initialIsAnonymous = false
}: ReviewDialogProps) {
  const [rating, setRating] = useState(initialRating)
  const [comment, setComment] = useState(initialComment)
  const [isAnonymous, setIsAnonymous] = useState(initialIsAnonymous)
  const [isSubmitting, setIsSubmitting] = useState(false)

  useEffect(() => {
    if (open) {
      setRating(initialRating)
      setComment(initialComment)
      setIsAnonymous(initialIsAnonymous)
    }
  }, [open, initialRating, initialComment, initialIsAnonymous])

  const handleSubmit = async () => {
    try {
      setIsSubmitting(true)
      await api.post(`/api/orders/${orderId}/review`, {
        rating,
        comment,
        is_anonymous: isAnonymous
      })
      toast.success('评价成功')
      onOpenChange(false)
      onSuccess()
    } catch (error: any) {
      toast.error(error.response?.data?.detail || '评价失败')
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
            {initialRating ? '修改评价' : '评价订单'}
          </DialogTitle>
        </DialogHeader>
        <div className="space-y-4 py-4">
          <div className="flex items-center justify-center space-x-1">
            {[1, 2, 3, 4, 5].map((value) => (
              <button
                key={value}
                onClick={() => setRating(value)}
                className="focus:outline-none"
              >
                <svg
                  className={`h-8 w-8 ${
                    value <= rating ? 'text-yellow-400' : 'text-gray-200'
                  }`}
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                </svg>
              </button>
            ))}
          </div>
          <Textarea
            placeholder="请输入评价内容..."
            value={comment}
            onChange={(e) => setComment(e.target.value)}
            rows={4}
          />
          <div className="flex items-center space-x-2">
            <Checkbox
              id="anonymous"
              checked={isAnonymous}
              onCheckedChange={(checked) => setIsAnonymous(checked as boolean)}
            />
            <label
              htmlFor="anonymous"
              className="text-sm text-gray-700 cursor-pointer"
            >
              匿名评价
            </label>
          </div>
          <div className="flex justify-end space-x-4">
            <Button
              variant="outline"
              onClick={() => onOpenChange(false)}
            >
              取消
            </Button>
            <Button
              onClick={handleSubmit}
              disabled={isSubmitting}
            >
              {isSubmitting ? '提交中...' : '提交评价'}
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
} 